<template>
  <div class="chartBox">
    <div class="chartBox-title">异常告警统计</div>
    <div class="chartBox-detail">
      <div class="chartBox-detail-left">
        <div class="info">
          <div class="text">待处理告警</div>
          <div class="num">{{ pendingCountAll }}</div>
        </div>
        <div class="info">
          <div class="text">今日告警</div>
          <div class="num" style="color: #fd4156">{{ alarmCountAll }}</div>
        </div>
        <div class="info">
          <div class="text">今日已处理</div>
          <div class="num">{{ processedCountAll }}</div>
        </div>
        <div class="info">
          <div class="text">今日未处理</div>
          <div class="num">{{ unprocessedCountAll }}</div>
        </div>
        <div class="info">
          <div class="text">超时未处理</div>
          <div class="num">{{ timeoutCountAll }}</div>
        </div>
      </div>
      <div class="chartBox-detail-right">
        <div style="width: 100%; height: 350px">
          <MyEchart :option="dataSource"></MyEchart>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, computed, watch } from 'vue'
import { getAlarmStatisticsInfo } from '@/api/api'
import MyEchart from '@/components/echarts/MyCharts2.vue'
import { useRoute } from 'vue-router'
import { useBaseParamStore } from '@/stores/baseParams'

const baseParamStore = useBaseParamStore()
const route = useRoute()
let xData = ref([])
let alarmCount = reactive<number[]>([])
let processedCount = ref([])
let unprocessedCount = ref([])
let timeoutCount = ref([])
// 统计
let pendingCountAll = ref(0)
let alarmCountAll = ref(0)
let processedCountAll = ref(0)
let unprocessedCountAll = ref(0)
let timeoutCountAll = ref(0)

function formatDateToMD(dateStr) {
  const date = new Date(dateStr)
  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始
  const day = String(date.getDate()).padStart(2, '0')
  return `${month}/${day}`
}

// 异常告警统计
const featchAlarmStatisticsInfo = async () => {
  try {
    const res = await getAlarmStatisticsInfo({
      orgId: baseParamStore.baseParam.orgId
    })
    if (res && res.data) {
      let { data } = res
      pendingCountAll.value = data.pendingCount
      alarmCountAll.value = data.alarmCount
      processedCountAll.value = data.processedCount
      unprocessedCountAll.value = data.unprocessedCount
      timeoutCountAll.value = data.timeoutCount

      data.alarmStatisticsDetailVoList?.forEach((item) => {
        xData.value.push(formatDateToMD(item.dateTime))
        alarmCount.push(item.alarmCount)
        processedCount.value.push(item.processedCount)
        unprocessedCount.value.push(item.unprocessedCount)
        timeoutCount.value.push(item.timeoutCount)
      })
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

const dataSource = reactive({
  color: ['#fd4156', '#39bc78', '#00a6e9', '#3903d6'],
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    x: 'left',
    itemHeight: 12,
    itemWidth: 12,
    left: 50,
    textStyle: {
      color: '#ffffff' // 设置图例文字颜色为白色
    },
    icon: 'circle',
    data: ['告警', '已处理', '未处理', '超时未处理']
  },
  xAxis: {
    type: 'category',
    boundaryGap: true,
    data: xData.value,
    axisLine: {
      lineStyle: {
        color: '#fff'
      }
    }
  },
  yAxis: [
    // y轴
    {
      type: 'value',
      splitLine: {
        lineStyle: {
          // 设置背景横线
          color: 'rgba(106, 110, 126,0.5)'
        }
      },
      axisLabel: {
        //y轴文字的配置
        textStyle: {
          color: '#fff'
        }
        // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
      }
    }
  ],
  series: [
    {
      name: '告警',
      data: alarmCount,
      type: 'line',
      smooth: true, //曲线
      areaStyle: {
        // 区域填充样式。设置后显示成区域面积图。
        color: {
          // 填充的颜色 -- 自定义区域渐变颜色
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#fd4156'
            },
            {
              offset: 0.8,
              color: '#042d60'
            }
          ]
        }
      }
    },
    {
      name: '已处理',
      data: processedCount.value,
      type: 'line',
      smooth: true, //曲线
      areaStyle: {
        // 区域填充样式。设置后显示成区域面积图。
        color: {
          // 填充的颜色 -- 自定义区域渐变颜色
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#39bc78'
            },
            {
              offset: 0.8,
              color: '#042d60'
            }
          ]
        }
      }
    },
    {
      name: '未处理',
      data: unprocessedCount.value,
      type: 'line',
      smooth: true, //曲线
      areaStyle: {
        // 区域填充样式。设置后显示成区域面积图。
        color: {
          // 填充的颜色 -- 自定义区域渐变颜色
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#00a6e9'
            },
            {
              offset: 0.8,
              color: '#042d60'
            }
          ]
        }
      }
    },
    {
      name: '超时未处理',
      data: timeoutCount.value,
      type: 'line',
      smooth: true, //曲线
      areaStyle: {
        // 区域填充样式。设置后显示成区域面积图。
        color: {
          // 填充的颜色 -- 自定义区域渐变颜色
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#3903d6'
            },
            {
              offset: 0.8,
              color: '#042d60'
            }
          ]
        }
      }
    }
  ]
})

onMounted(() => {
  featchAlarmStatisticsInfo() // 初始化 cascaderData.value
})
</script>

<style scoped lang="scss">
.chartBox {
  width: 100%;
  color: #fff;

  &-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
  }

  &-detail {
    display: flex;
    flex-direction: column;
    &-left {
      display: flex;
      justify-content: space-around;
      width: 80%;
      height: 80px;
      .info {
        width: 100px;
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .num {
          font-size: 30px;
        }
        .text {
          font-size: 12px;
          font-weight: normal;
        }
      }
    }

    &-right {
      width: 100%;
    }
  }
}
</style>
